<template>
	<view class="order-examine">
		<nav-bar title="订单审核"></nav-bar>
		<block v-if="true">
			<view class="user">
				<u-avatar :src="user.headavatar" size="120" class="avatar"></u-avatar>
				<view class="right">
					<view class="top">
						<text class="name">{{user.name}}</text>
						<text class="tag">{{user.vip_level_text}}</text>
					</view>
					<view class="phone">
						{{user.mobile}}
					</view>
				</view>
			</view>
			<view class="form">
				<view class="item">
					<view class="label">商品图片</view>
					<view class="input">
						<block v-if="!form.goods_image">
							<text>请拍照上传商品图片</text>
							<view class="icon">
								<u-icon name="arrow-left"></u-icon>
							</view>
						</block>
						<block v-else>
							<view></view>
							<view class="upload-img" @click="setPic('goods_image')">
								<image :src="detail.goods_image_url" mode="heightFix"></image>
								<!-- <my-image :src="form.tickets" mode="heightFix" ref="tickets"
									@tapImg="setPic('tickets')"></my-image> -->
								<text class="hint" @click.stop="previewImg('goods_image_url')">点击放大</text>
							</view>
						</block>
					</view>
				</view>
				<view class="item">
					<view class="label">收银小票</view>
					<view class="input">
						<block v-if="!form.tickets">
							<text>请拍照上传收银小票</text>
							<view class="icon">
								<u-icon name="arrow-left"></u-icon>
							</view>
						</block>
						<block v-else>
							<view></view>
							<view class="upload-img" @click="setPic('tickets')">
								<!-- <my-image :src="form.goods_image" mode="heightFix" @tapImg="setPic('goods_image')"
									ref="goods_image">
								</my-image> -->
								<image :src="detail.tickets_url" mode="heightFix"></image>
								<text class="hint" @click.stop="previewImg('tickets_url')">点击放大</text>
							</view>
						</block>
					</view>
				</view>
				<view class="item" @click="showCategory">
					<view class="label grey">品类</view>
					<view class="input">
						<!-- <input placeholder="请选择品类" :disabled="true" v-model="form.goods_category_id" /> -->
						<text>{{formatCategory}}</text>
						<u-icon name="arrow-down-fill"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="label grey">订单号</view>
					<view class="input">
						<input placeholder="请输入订单号" :disabled="!canEdit" v-model="form.order_num" />
					</view>
				</view>
				<view class="item">
					<view class="label grey">订单金额</view>
					<view class="input">
						<input placeholder="请输入订单号" :disabled="!canEdit" type="digit" v-model="form.money" />
					</view>
				</view>
				<view class="item">
					<view class="label grey">商品成本</view>
					<view class="input">
						<input placeholder="请输入订单号" :disabled="!canEdit" type="digit" v-model="form.cost" />
					</view>
				</view>
			</view>
			<!-- <view class="confirm" @click="confirm">提交</view> -->
			<view class="confirm" @click="confirm" v-if="detail.status == 1">提交</view>
			<u-select v-model="show" :list="list" @confirm="setCategory"></u-select>
		</block>
	</view>
</template>

<script>
	import {
		orderRecordDetailApi,
		customerInfoApi,
		categoryListApi,
		examineApi
	} from "@/api/store.js"
	// import myImage from "../components/myImage.vue"
	import {
		upload,
		uploadStore
	} from "@/utils/upload.js"
	export default {
		data() {
			return {
				src: "",
				id: '',
				show: false,
				form: {
					user_id: '',
					goods_image: '',
					tickets: '',
					order_num: '',
					cost: '',
					money: '',
					goods_category_id: '',
					id: ''
				},
				detail: {},
				user: {},
				// 分类列表
				list: [],
			}
		},
		// components: {
		// 	myImage
		// },
		computed: {
			formatCategory() {
				let str = ""
				let target = this.list.find(item => {
					return item.value == this.form.goods_category_id
				})
				if (target) {
					str = target.label
				} else {
					str = "请选择品类"
				}
				return str
			},
			canEdit() {
				return this.detail.status == 1
			}
		},
		onLoad(opt) {
			this.id = opt.id || ''
			this.getData()
		},
		methods: {
			async getData() {
				let {
					data
				} = await categoryListApi()
				this.list = data.map(item => {
					return {
						value: item.id,
						label: item.goods_cate_name
					}
				})
				if (this.id) {
					let {
						data
					} = await orderRecordDetailApi({
						order_id: this.id
					})
					// 获取需要接待的会员信息
					let res = await customerInfoApi({
						user_id: data.user_id
					})
					this.user = res.data
					for (const key in this.form) {
						if (data[key]) {
							this.form[key] = data[key]
						}
					}
					this.detail = data
					console.log(this.detail);
				}
			},
			async setPic(key) {
				if (!this.canEdit) return
				let data = await uploadStore()
				let urlKey = `${key}_url`
				console.log(urlKey);
				this.form[key] = data.url
				this.detail[urlKey] = data.domain_url
			},
			previewImg(key) {
				uni.previewImage({
					urls: [this.detail[key]]
				})
				// this.$refs[key].previewImg()
			},
			async confirm() {
				for (const key in this.form) {
					if (!this.form[key]) {
						return this.$utils.toast('请将信息填写完整')
					}
				}
				let {
					data
				} = await examineApi(this.form)
				this.$utils.success('提交成功')
				this.detail.status = 2
			},
			showCategory() {
				if (!this.canEdit) return
				this.show = true;
			},
			setCategory(arr) {
				let {
					value
				} = arr[0]
				this.form.goods_category_id = value
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'index.scss';
</style>
